<template>
  <div class="album-content">
    <div class="album-main">
      <div class="album-head-list">
        <a :class="{
          'album-list-item':true,
           'album-list-active':page === index
        }" href="#" v-for="(tag,index) in albumTag" :key="tag.id" @click="setData(index)">{{tag.name}}</a>
      </div>
      <div class="album-mod-wrap">
        <div class="album-mod-list">
          <div class="album-mod-item" v-for="(data,index) in albumData" :key="data.id">
            <div  class="album-mod-item-link">
              <a href="#" class="album-item-link">
                <img :src="albumImg[index]" alt="" />
                <i class="iconfont icon-playfill"></i>
              </a>
            </div>
            <a href="#" class="album-mod-tit">{{data.name}}</a>
            <a href="#" class="album-mod-text">{{data.singers[0].name}}</a>
            <p class="album-mod-time">{{data.release_time}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "MusicAlbumList",
}
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getNewDisksApi ,getImageUrlApi} from '@/api/AlbumList/albumList'
import type {AlbumListNewAlbumTagListApi,AlbumListNewAlbumItemApi} from '@/api/AlbumList/model/albumListModel'
const albumTag = ref<AlbumListNewAlbumTagListApi>([])
const albumData = ref<AlbumListNewAlbumItemApi>([])
const albumImg = ref<string[]>([])
const page = ref(1)

const setNewDisk = async (page: number) => {
  console.log(123)
  const res = await getNewDisksApi(page)
  // console.log(res)
  albumData.value = res.new_album.data.albums
  albumTag.value = res.new_album_tag.data.area
  albumData.value.forEach(async (item) => {
    const res = await getImageUrlApi(item.mid)
    // console.log(res)
    albumImg.value.push(res.data.imageUrl)
    // console.log(res)
   
  })
  // page.value = page
}
onMounted(async () => {
  
  setNewDisk(page.value)
  // const albumImg = []
  
  // albumData.value.img = albumImg.value
  // console.log('aaaa',albumImg.value)
})

const setData = (index:number) => {
  console.log(index)
  page.value = index
  setNewDisk(index)
}

</script>

<style scoped>
.album-content {
  width: 100%;
  background-color: #fafafa;
}
.album-main {
  width: 1200px;
  margin: 0 auto;
  padding-top: 50px;
}
.album-head-list {
  width: 100%;
  height: 41px;
  display: flex;
  padding-left: 65px;
}
.album-list-item {
  font-size: 14px;
  width: 44px;
  height: 26px;
  color: #000;
  line-height: 26px;
  text-align: center;
  display: block;
  margin-bottom: 15px;
  margin-right: 24px;
}
.album-list-item:hover{
  color: #31c27c;
}
.album-list-active {
  background-color: #31c27c;
  color: #fff !important;
}
.album-mod-wrap{
  width: 1200px;
}
.album-mod-list{
  width: 1220px;
}
.album-mod-item{
  width: 224px;
  height: 350px;
  margin-right: 20px;
  display: inline-block;
  padding-bottom: 44px;
}
.album-mod-item-link{
  width: 224px;
  height: 224px;
 margin: 0;
}
.album-item-link{
  width: 224px;
  height: 224px;
  display: block;
  position: relative;
  overflow: hidden;
}
.album-mod-item-link .album-item-link img{
  width: 224px;
  height: 224px;
  transform: scale(1.0);
 transition-property: transform;
 transition-duration: 1s;
}
.album-item-link:hover img{
  transform: scale(1.1);
 transition-property: transform;
 transition-duration: 1s;
}
.album-item-link:hover .icon-playfill{
  opacity: 1;
  transform: scale(1.0);
  transition: 0.5 transform,0.5s opacity ;
  /* transition-property: opacity,transform;
 transition-duration: 1s; */
}
.album-item-link .icon-playfill{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  height: 70px;
  color: #333;
  border-radius:50% ;
  text-align: center;
  line-height: 70px;
  background-color: #fff;
  font-size: 40px;
  color: #4C515B;
  transform: scale(0.8);
  opacity: 0;
  transition-property: transform,opacity;
 transition-duration: 1s;
 /* transition: 0.5s transform,0.5s opacity; */

}
.album-mod-item .album-mod-tit{
  overflow: hidden;
  font-size: 14px;
  width: 224px;
  min-height: 40px;
  display: block;
  color:#000;
  margin-top: 14px;
  margin-bottom: 5px;
}
.album-mod-tit:hover{
  color:#31c27c;
}
.album-mod-text:hover{
  color:#31c27c;
}
.album-mod-item .album-mod-time, .album-mod-text{
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}
</style>
